<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米垂直导航栏</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4267181_47ctqtqmlml.css" />
    <style>
      .side {
        width: 234px;
        background-color: #a2a0a0;
      }
      .side a {
        display: block;
        text-decoration: none;
        color: #fff;
        padding: 15px 30px;
      }

      .side a:hover {
        background-color: #ff6700;
      }

      .side a em {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="side">
      <a href="#">手机<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">电视<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">笔记本 平板<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">出行 穿戴<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">耳机 音箱<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">家电<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">智能 路由器<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">电源 配件<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">健康儿童<em class="iconfont icon-right-arrow"></em></a>
      <a href="#">生活 箱包<em class="iconfont icon-right-arrow"></em></a>
    </div>
  </body>
</html>
